<!DOCTYPE html>
<html>
<head>
    <title>Customizing Appearance</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-init="mobileButtonGroupInit" data-title="ButtonGroup Look" id="buttongroup-appearance">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Background color
            <ul>
                <li>
                    <ul data-role="buttongroup" data-index="0">
                        <li style="background-color: green">Green</li>
                        <li style="background-color: darkred">Red</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Font Size Small
            <ul>
                <li>
                    <ul data-role="buttongroup" data-index="0">
                        <li style="font-size: 0.8em;">Flat View</li>
                        <li style="font-size: 0.8em">Grouped View</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Font Size Normal
            <ul>
                <li>
                    <ul data-role="buttongroup" data-index="1">
                        <li>2011</li>
                        <li>2012</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Font Size Large
            <ul>
                <li>
                    <ul data-role="buttongroup" data-index="0">
                        <li data-icon="toprated" style="font-size: 1.3em">Featured</li>
                        <li data-icon="globe" style="font-size: 1.3em">Popular</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Button icons / check help for more
            <ul>
                <li>
                    <ul data-role="buttongroup" data-index="1">
                        <li data-icon="play"></li>
                        <li data-icon="pause"></li>
                        <li data-icon="rewind"></li>
                        <li data-icon="fastforward"></li>
                        <li data-icon="globe"></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<style scoped>
    #buttongroup-appearance .km-button:not(.km-back) {
        padding-left: .5em;
        padding-right: .5em;
    }
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
